<template>
  <div class="mm-box">
    <div class="header-search-box shadow">
      <myForm
        :searchBox="{ span: 4 }"
        :span="5"
        :ruleForm="searchForm.data"
        :formData="searchForm.config"
        @reset="getMonitorList(true)"
        @submitForm="getMonitorList(true)"
      >
      </myForm>
    </div>
    <div class="scene-main">
      <sec-table
        :loading="searchTable.loading"
        :tableData="searchTable.rows"
        :tableCol="searchTable.cols"
        ref="secTabel"
      >
      </sec-table>
      <el-pagination
        @size-change="sizeChange"
        @current-change="currentChange"
        :current-page.sync="currentPage"
        background
        :page-sizes="pageSizes"
        :page-size="pageSize"
        :layout="layout"
        :total="totalSize"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import myForm from "components/formValidate/myForm";
import secTable from "components/table/comTable";
import { paginationMixin } from "common/js/mixin";
import { monitorListApi } from "api/evaluateApi";
export default {
  name: "monitoringManage",
  props: {},
  mixins: [paginationMixin],
  components: {
    myForm,
    secTable,
  },
  data() {
    return {
      searchForm: {
        data: {
          id: "",
          domain: "",
          time: "",
        },
        config: [
          {
            type: "text",
            label: "域名",
            prop: "domain",
            placeholder: "请输入域名（资产ID）",
            span: 6,
          },
          { type: "text", label: "监控任务ID", prop: "id" },
          { type: "datetimerange", span: 9, label: "最近监控时间", prop: "time" },
        ],
      },
      searchTable: {
        loading: false,
        cols: [
          { label: "监控任务ID", prop: "id" },
          {
            label: "监控状态",
            prop: "status",
            formatter: (row, column, cellValue, index) => {
              return this.utils.getDicLabel(102001, cellValue);
            },
          },
          { label: "资产ID", prop: "assetId" },
          { label: "域名", prop: "domain" },
          { label: "系统名称", prop: "domainName" },
          { label: "权属负责人", prop: "leader" },
          { label: "权属部门", prop: "dept2" },
          { label: "最近监控时间", prop: "lastestTimeText", width: 150 },
          {
            label: "操作",
            prop: "operation",
            width: 80,
            children: [
              {
                title: "详情",
                click: ({ row }) => {
                  this.$router.push({
                    path: "/evaluate/monitoring/detail",
                    query: { id: row.id, domain: row.domain, assetId: row.assetId, reportId: row.reportId },
                  });
                },
              },
            ],
          },
        ],
        rows: [],
      },
    };
  },
  computed: {},
  mounted() {
    this.getMonitorList();
  },
  methods: {
    getMonitorList(paginationReset) {
      //解决点击搜索或者重置的时候 改成第一页
      if (paginationReset) {
        this.paginationReset();
      }
      this.searchTable.loading = true;
      monitorListApi({
        id: this.searchForm.data.id,
        domain: this.searchForm.data.domain,
        startDate: this.searchForm.data.time[0] || "",
        endDate: this.searchForm.data.time[1] || "",
        pageNum: this.page,
        pageSize: this.pageSize,
      }).then((res) => {
        this.searchTable.loading = false;
        this.searchTable.rows = res.data;
        this.totalSize = res.count;
      });
    },
    sizeChange(val) {
      this.pageSize = val;
      this.getMonitorList();
    },
    currentChange(val) {
      this.page = val;
      this.getMonitorList();
    },
  },
  watch: {},
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
</style>
